<template>
  <div id="payMuchEdit">
    <div class="title"></div>
    <div class="content">
      <div class="pay_much_edit" v-if="oInitEditPayItem">
        <div class="pay_much_edit_content">
          <div class="title">How much do you pay Anne?</div>
          <div class="pay_rate_info">
            <el-row>
              <el-col :span="24" class="title" v-if="oInitEditPayItem">you pay {{oInitEditPayItem.personName}}:</el-col>
              <el-col :span="4">
                <el-select v-model="payMuchEditModel.payTypeValue">
                  <el-option v-for="(item,key) in payMuchEditModel.payType" :key="key"  :label="item.showName" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col v-if="payMuchEditModel.payTypeValue" :span="1" style="padding-right: 4px;text-align: right">$</el-col>
              <el-col v-if="payMuchEditModel.payTypeValue" :span="2">
                <el-input-number style="width: 80px"  v-model="payMuchEditModel.payRateValue" size="small" :min="0" :controls="false"></el-input-number>
              </el-col>
              <el-col v-if="payMuchEditModel.payTypeValue == 1" :span="2" style="padding-left: 4px">/&nbsp;hour</el-col>
              <el-col v-if="payMuchEditModel.payTypeValue == 2" :span="3" style="padding-left: 4px">
                <el-select v-model="payMuchEditModel.payRangeValue">
                  <el-option v-for="(item,key) in payMuchEditModel.payRange" :key="key"  :label="item.showName" :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row v-if="payMuchEditModel.payTypeValue == 2">
              <el-col :span="4"><el-checkbox>Anne works part-time</el-checkbox></el-col>
              <el-col :span="3" :offset="1">Annes works</el-col>
              <el-col :span="1"><el-input></el-input></el-col>
              <el-col :span="4" class="tc"> Anneworks part-time</el-col>
              <el-col :span="1"><el-input></el-input></el-col>
              <el-col :span="4" class="tc">hours per day and</el-col>

            </el-row>
          </div>
          <div class="check_group_item">
            <div class="title">you can also pay Anne:</div>
            <el-checkbox v-model="payMuchEditModel.isOverTime" :true-label="1" :false-label="0">Overtime Pay</el-checkbox><br>
            <el-checkbox v-model="payMuchEditModel.isDoubleOverTime" :true-label="1" :false-label="0">Double Overtime Pay</el-checkbox><br>
            <el-checkbox v-model="payMuchEditModel.isSick" :true-label="1" :false-label="0">Sick Pay</el-checkbox><br>
            <el-checkbox v-model="payMuchEditModel.isVacation" :true-label="1" :false-label="0">Vacation Pay</el-checkbox><br>
            <el-checkbox v-model="payMuchEditModel.isHoliday" :true-label="1" :false-label="0">Holiday Pay</el-checkbox><br>
            <el-checkbox v-model="payMuchEditModel.isBonus" :true-label="1" :false-label="0">Bonus</el-checkbox><br>
            <el-checkbox v-model="payMuchEditModel.isCommission" :true-label="1" :false-label="0">Commission</el-checkbox>
          </div>
        </div>
        <div class="pay_much_edit_btn_group">
          <el-button type="primary" @click="submit">Done</el-button>
          <el-button @click="$router.back()">Cancel</el-button>
        </div>
      </div>
    </div>
  </div>
<!--  <div class="loading_content" v-else v-loading="true"  element-loading-text="loading"></div>-->
</template>

<script>
  export default {
    components:{
    },
    data:function(){
      return{
        //数据Model
        payMuchEditModel:{
          payTypeValue:null,
          payRangeValue:1,
          payRateValue:null
        }
      }
    },
    created:function(){
      this.$store.dispatch('initEditPayItem',{personId:this.getPersonId()});
    },
    activated:function(){
      //this.$store.dispatch('initEditPayItem',{personId:this.getPersonId()});
    },
    deactivated:function () {
      this.clearData();
    },
    computed:{
      oInitEditPayItem(){
        if(this.$store.getters.oInitEditPayItem){
            this.payMuchEditModel = JSON.parse(JSON.stringify(Object.assign(this.payMuchEditModel,this.$store.getters.oInitEditPayItem)));
        }
       return  this.$store.getters.oInitEditPayItem;
      }
    },
    watch:{

    },
    mounted:function(){
    },
    methods:{
      back:function(){
        this.$router.push('/payRoll/payRollCenter');
      },
      getPersonId(){
        return this.$route.params.id
      },
      clearData:function () {
        this.payMuchEditModel = {
          payTypeValue:null,
          payRangeValue:1,
          payRateValue:null
        }
      },
      submit(){
        var t = this;
        var param = {
          "personId":this.getPersonId(),
          "payType":this.payMuchEditModel.payTypeValue,//1:Hourly;2:Salary
          "payRange":this.payMuchEditModel.payRangeValue,//1;week;2:month;3:year
          "payRate":this.payMuchEditModel.payRateValue,
          "isOverTime":this.payMuchEditModel.isOverTime,//1：选中;0"未选
          "isDoubleOverTime":this.payMuchEditModel.isDoubleOverTime,//1：选中;0"未选
          "isSick":this.payMuchEditModel.isSick,//1：选中;0"未选
          "isVacation":this.payMuchEditModel.isVacation,//1：选中;0"未选
          "isHoliday":this.payMuchEditModel.isHoliday,//1：选中;0"未选
          "isBonus":this.payMuchEditModel.isBonus,//1：选中;0"未选
          "isCommission":this.payMuchEditModel.isCommission,//1：选中;0"未选
        }
        t.$store.dispatch('updatePayItem',param).then(function () {
          t.$message.success('update success!');
          var editModel = t.$store.getters.editModel;
          if(editModel){
            editModel = JSON.parse(JSON.stringify(editModel));
            editModel.payType = t.payMuchEditModel.payTypeValue;
            editModel.payRate = t.payMuchEditModel.payRateValue;
            editModel.payRange = t.payMuchEditModel.payRangeValue;
          }
          t.$store.commit('setCommonStateData',{key:'editModel',data:editModel});
          t.$router.back();
        });
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  .pay_much_edit {
    min-height: 100%;
    background-color: #fff;
    padding: 50px;
    box-sizing: border-box;
    .pay_much_edit_content {
      >.title{
        font-size: 20px;
        line-height: 50px;
        color: #333
      }
      .pay_rate_info{
        padding-bottom: 20px;
        border-bottom: 1px #ddd solid;
        .el-row{
          padding: 5px 0;
          line-height: 30px;
        }
        .el-row >.title{
          font-weight: bold;
          line-height: 40px;
          color: #666
        }
      }
      .check_group_item{
        line-height: 33px;
        >.title{
          font-weight: bold;
          line-height: 40px;
          color: #666
        }
      }
    }
    .pay_much_edit_btn_group{
      margin: 40px 0;
    }
  }
</style>
